<template>
  <div class="flex h-screen" style="background-color: #FAF9F5;">
    <!-- 侧边栏 -->
    <div :class="[
      'border-r border-gray-200 flex flex-col transition-all duration-500 ease-in-out',
      sidebarCollapsed ? 'w-16' : 'w-64'
    ]" style="background-color: #FAF9F5; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
      <!-- Logo区域 -->
      <div :class="[
        'border-b border-gray-200 transition-all duration-500 h-14 flex items-center',
        sidebarCollapsed ? 'px-2' : 'px-6'
      ]">
        <div :class="[
          'flex items-center w-full',
          sidebarCollapsed ? 'justify-center' : 'justify-between'
        ]">
          <div v-if="!sidebarCollapsed" class="flex items-center space-x-3">
            <div class="w-8 h-8 bg-green-600 rounded-[0.6rem] flex items-center justify-center flex-shrink-0">
              <i class="icon-[heroicons--academic-cap] w-5 h-5 text-white"></i>
            </div>
            <div :class="[
              'transition-all duration-500 ease-in-out overflow-hidden',
              sidebarCollapsed ? 'opacity-0 w-0' : 'opacity-100 w-auto delay-200'
            ]">
              <h1 class="text-lg font-bold text-gray-900 leading-tight whitespace-nowrap">学生注册系统</h1>
              <p class="text-xs text-gray-500 leading-tight whitespace-nowrap">学生服务</p>
            </div>
          </div>
          <button
            @click="toggleSidebar"
            :class="[
              'transition-all duration-200 active:scale-[0.985] flex-shrink-0',
              sidebarCollapsed ? 'w-8 h-8 bg-green-600 rounded-[0.6rem] flex items-center justify-center hover:bg-green-700' : 'p-1 text-gray-400 hover:text-gray-600'
            ]"
            :title="sidebarCollapsed ? '展开侧边栏' : '收起侧边栏'"
            :style="!sidebarCollapsed ? 'background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);' : ''"
          >
            <i v-if="sidebarCollapsed" class="icon-[heroicons--chevron-right] w-4 h-4 text-white"></i>
            <i v-else :class="[
              'w-4 h-4 transition-transform duration-300',
              'icon-[heroicons--chevron-left]'
            ]"></i>
          </button>
        </div>
      </div>

      <!-- 导航菜单 -->
      <nav class="flex-1 p-4 space-y-2 overflow-y-auto">
        <router-link
          v-for="item in menuItems"
          :key="item.name"
          :to="item.to"
          :class="[
            'flex items-center rounded-[0.6rem] text-sm font-medium transition-all duration-200',
            sidebarCollapsed ? 'justify-center px-2 py-2' : 'px-3 py-2 space-x-3',
            $route.name === item.name
              ? 'text-green-700 border-r-2 border-green-500'
              : 'text-gray-700 hover:text-gray-900'
          ]"
          :style="$route.name === item.name ? 'background-color: #F0FDF4;' : ''"
          :title="sidebarCollapsed ? item.label : ''"
        >
          <i :class="[item.icon, 'w-5 h-5 flex-shrink-0']"></i>
          <span :class="[
            'transition-all duration-500 ease-in-out overflow-hidden whitespace-nowrap',
            sidebarCollapsed ? 'opacity-0 w-0' : 'opacity-100 w-auto delay-200'
          ]">{{ item.label }}</span>
          <span v-if="item.badge && !sidebarCollapsed" :class="[
            'ml-auto px-2 py-0.5 bg-red-100 text-red-600 text-xs rounded-full transition-all duration-500 ease-in-out overflow-hidden opacity-100 w-auto delay-200'
          ]">
            {{ item.badge }}
          </span>
          <span v-else-if="item.status === 'completed' && !sidebarCollapsed" :class="[
            'ml-auto transition-all duration-500 ease-in-out overflow-hidden opacity-100 w-auto delay-200'
          ]">
            <i class="icon-[heroicons--check-circle] w-4 h-4 text-green-500"></i>
          </span>
          <span v-else-if="item.status === 'pending'" :class="[
            'ml-auto transition-all duration-500 ease-in-out overflow-hidden',
            sidebarCollapsed ? 'opacity-0 w-0' : 'opacity-100 w-auto delay-200'
          ]">
            <i class="icon-[heroicons--clock] w-4 h-4 text-yellow-500"></i>
          </span>
        </router-link>
      </nav>

      <!-- 用户信息区域 -->
      <div class="p-4 border-t border-gray-200">
        <div :class="[
          'flex items-center p-3 bg-gray-50 rounded-lg transition-all duration-300',
          sidebarCollapsed ? 'justify-center' : 'space-x-3'
        ]">
          <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center flex-shrink-0">
            <i class="icon-[heroicons--user] w-4 h-4 text-white"></i>
          </div>
          <div :class="[
            'flex-1 min-w-0 transition-all duration-500 ease-in-out overflow-hidden',
            sidebarCollapsed ? 'opacity-0 w-0' : 'opacity-100 w-auto delay-200'
          ]">
            <p class="text-sm font-medium text-gray-900 truncate whitespace-nowrap">{{ userInfo?.name || '学生' }}</p>
            <p class="text-xs text-gray-500 whitespace-nowrap">{{ userInfo?.studentId || '学号未设置' }}</p>
          </div>
          <button
            @click="handleLogout"
            :class="[
              'p-1 text-gray-400 hover:text-gray-600 transition-colors',
              sidebarCollapsed ? 'mt-2' : ''
            ]"
            title="退出登录"
          >
            <i class="icon-[heroicons--arrow-right-on-rectangle] w-4 h-4"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="flex-1 flex flex-col overflow-hidden">
      <!-- 顶部导航栏 -->
      <header class="px-6 h-14 flex items-center border-b border-gray-200" :style="{ backgroundColor: '#FAF9F5', boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)' }">
        <div class="flex items-center justify-between">
          <div class="flex items-center space-x-4">
            <!-- 面包屑导航 -->
            <nav class="flex items-center space-x-2 text-sm">
              <router-link to="/student/home" class="text-gray-500 hover:text-gray-700">
                首页
              </router-link>
              <i class="icon-[heroicons--chevron-right] w-4 h-4 text-gray-400"></i>
              <span class="text-gray-900 font-medium">{{ currentPageTitle }}</span>
            </nav>
          </div>
          
          <div class="flex items-center space-x-4">
            <!-- 报到进度 -->
            <div class="flex items-center space-x-2 text-sm">
              <span class="text-gray-500">报到进度:</span>
              <div class="flex items-center space-x-1">
                <div class="w-16 bg-gray-200 rounded-full h-2">
                  <div class="bg-green-500 h-2 rounded-full" :style="{ width: registrationProgress + '%' }"></div>
                </div>
                <span class="text-green-600 font-medium">{{ registrationProgress }}%</span>
              </div>
            </div>
            
            <!-- 通知按钮 -->
            <button class="relative p-2 text-gray-400 hover:text-gray-600 transition-colors">
              <i class="icon-[heroicons--bell] w-5 h-5"></i>
              <span v-if="unreadNotifications > 0" class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
            </button>
          </div>
        </div>
      </header>

      <!-- 页面内容 -->
      <main class="flex-1 overflow-auto p-6">
        <router-view />
      </main>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useAuthStore } from '../../stores/auth'
import { useAppStore } from '../../stores/app'

// 使用stores和路由
const authStore = useAuthStore()
const appStore = useAppStore()
const router = useRouter()
const route = useRoute()

// 响应式数据
const userInfo = ref({
  name: '张三',
  studentId: '2024001'
})

const registrationProgress = ref(65)
const unreadNotifications = ref(2)

// 侧边栏收起状态
const sidebarCollapsed = ref(false)

// 菜单项配置
const menuItems = ref([
  {
    name: 'StudentHome',
    to: '/student/home',
    label: '首页',
    icon: 'icon-[heroicons--home]'
  },
  {
    name: 'StudentProfile',
    to: '/student/profile',
    label: '个人信息',
    icon: 'icon-[heroicons--user]',
    status: 'completed'
  },
  {
    name: 'StudentRegistration',
    to: '/student/registration',
    label: '报到办理',
    icon: 'icon-[heroicons--clipboard-document-check]',
    status: 'pending'
  },
  {
    name: 'StudentDormitory',
    to: '/student/dormitory',
    label: '宿舍申请',
    icon: 'icon-[heroicons--home]',
    status: 'pending'
  },
  {
    name: 'StudentPayment',
    to: '/student/payment',
    label: '缴费中心',
    icon: 'icon-[heroicons--currency-yen]',
    badge: '待缴费'
  },
  {
    name: 'StudentSchedule',
    to: '/student/schedule',
    label: '报到流程',
    icon: 'icon-[heroicons--calendar-days]'
  },
  {
    name: 'StudentNotices',
    to: '/student/notices',
    label: '通知公告',
    icon: 'icon-[heroicons--megaphone]',
    badge: unreadNotifications.value > 0 ? unreadNotifications.value : null
  },
  {
    name: 'StudentHelp',
    to: '/student/help',
    label: '帮助中心',
    icon: 'icon-[heroicons--question-mark-circle]'
  }
])

// 计算属性
const currentPageTitle = computed(() => {
  const currentItem = menuItems.value.find(item => item.name === route.name)
  return currentItem?.label || '学生服务'
})

// 方法
const toggleSidebar = () => {
  sidebarCollapsed.value = !sidebarCollapsed.value
}

const handleLogout = () => {
  appStore.showConfirm('确定要退出登录吗？', () => {
    authStore.logout()
    router.push('/student/login')
    appStore.showSuccess('已安全退出')
  })
}

// 生命周期
onMounted(() => {
  // 设置页面标题
  appStore.setPageTitle('学生服务')
  
  // 获取用户信息和进度
  loadUserInfo()
  loadRegistrationProgress()
})

// 加载用户信息
const loadUserInfo = () => {
  // 这里应该从API获取用户信息
  // 暂时使用模拟数据
}

// 加载报到进度
const loadRegistrationProgress = () => {
  // 这里应该从API获取报到进度
  // 暂时使用模拟数据
}
</script>

<style scoped>
@reference "tailwindcss"
/* 自定义样式 */
.router-link-active {
  @apply bg-green-50 text-green-700;
}

/* 滚动条样式 */
main::-webkit-scrollbar {
  width: 6px;
}

main::-webkit-scrollbar-track {
  background: #f1f5f9;
}

main::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

main::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
</style>